<template>
  <view v-if="isShow" class="blacklist-tip">{{ message }}</view>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      message: {
        type: String,
        default: ''
      },
      duration: {
        type: Number,
        default: 2000
      }
    },
    watch: {
      show: {
        handler(value) {
          this.isShow = value;
          if (value) {
            setTimeout(() => {
              this.isShow = false;
              this.$emit('showTip', this.isShow);
            }, this.duration);
          }
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        isShow: false
      };
    }
  };
</script>
<style lang="scss" scoped>
  .blacklist-tip {
    position: fixed;
    width: 60%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    margin: auto;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.7);
  }
</style>